How To...
Other
Change Button Text Dynamically

How to Change Button Text at Run-Time

IN THIS PAGE

Using JavaScript
Using a Conditional Expression

Description

The contents of a button can be dynamically set at run-time using JavaScript.

Discussion

The text shown in a button (or label or any other control in Alpha Anywhere) can be dynamically defined and updated at run-time. The button text can be set using JavaScript or a conditional expression.

Using JavaScript

You can use JavaScript to set the text of a button at run-time in a UX component. Buttons have a set of properties and methods available for modifying the button at run-time. The getControl() method can be used to get the JavaScript object for a button. In addition to changing the button's text, you can also change its icon, layout, style, help text and more (see A5.Button for details). The example below demonstrates changing a button's text:

var btn = {dialog.object}.getControl("BUTTON_1");
if (btn) { // check to ensure btn exists
    btn.html = "Click Me!";
    btn.icon = "svgIcon=#alpha-icon-starSolid:icon,24px{fill: orange}";
    btn.layout = "icon text";
    btn.refresh();
}

In Grids and other components, you must get a pointer to the HTML element for the button and change the text property. For example, the following code placed in the onClick event for a field in a Grid component can be used to change the text for a button in the same row as the field:

var btn = $("{grid.componentname}.V.R{grid.rownumber}."+"_UNBOUND_BUTTON_1");
if (btn) {
    btn.innerHTML = "Click me.";
}

Using a Conditional Expression

Button text can also be modified using a Conditional Expression and calling JavaScript function to set the innerHTML of the button element, which is passed to the JavaScript function. For example:

function setButtonText(ele) { 
    //ele is a pointer to the control for which the conditional rule is defined.
    //Your function can set any property on ele. for example: ele.style.color = 'red';

    ele.innerHTML = "Schedule Ship Date";
}

Watch the video below to learn more.

Setting the Text in a Label or Button Automatically - Conditional Text and Events

The UX and Grid Components have allow you to define client-side conditional style definitions that automatically change the style and/or class of a control when a particular expression is true (e.g., set the font of the amount due field to red if the balance is above $200). This conditional functionality can also be used to dynamically set the text in controls (such as buttons, hyperlinks and static text objects), and invoke arbitrary JavaScript functions when an expression is true.

This video is based on a UX Component, but the exact same functionality is also available in the Grid Component

Watch Video